<template>
  <div id="home">
    <MainNavbar></MainNavbar>
    <NavControl
        :NavControlData="['流行', '新款', '精选']"
        class="NavControl"
        @navClick="navClick"
        ref="navControl1"
        v-show="isFixed"
      ></NavControl>
    <Scroll
      class="content"
      ref="scroll"
      :probeType="3"
      :pullUpLoad="true"
      @scroll="scrollPosition"
      @pullingUp="loadMore"
    >
      <MainSwiper
        :swiperData="swiperData"
        @swiperImgLoad="swiperImgLoad"
      ></MainSwiper>
      <MainRecommend :recommendData="recommendData"></MainRecommend>
      <FeatureView></FeatureView>
      <NavControl
        :NavControlData="['流行', '新款', '精选']"
        class="NavControl"
        @navClick="navClick"
        ref="navControl2"
      ></NavControl>
      <GoodsList :itemList="itemList"></GoodsList>
    </Scroll>
    <BackTop @click.native="backTop" v-show="showBackTop"></BackTop>
  </div>
</template>
<script>
import MainSwiper from "./childComponent/MainSwiper";
import MainNavbar from "./childComponent/MainNavbar";
import MainRecommend from "./childComponent/MainRecommend";
import FeatureView from "./childComponent/FeatureView";
import BackTop from "components/content/backTop";

import GoodsList from "components/content/goods/GoodsList";
import NavControl from "components/content/NavControl";

import Scroll from "components/commom/scroll/scroll";

import { getHomeNavData } from "network/main";
import { getHomeGoodsData } from "network/main";

export default {
  data() {
    return {
      swiperData: [],
      recommendData: null,
      goodsListData: {
        sell: { page: 0, itemdata: [] },
        new: { page: 0, itemdata: [] },
        pop: { page: 0, itemdata: [] },
      },
      navType: "pop",
      showBackTop: false,
      navoffsetTop:0,
      isFixed:false

    };
  },
  components: {
    MainNavbar,
    MainSwiper,
    MainRecommend,
    FeatureView,
    NavControl,
    GoodsList,
    Scroll,
    BackTop,
  },
  activated(){

  },
  deactivated(){ 

  },
  created() {
    //请求轮播图数据
    this.getHomeNavData();

    //请求商品数据
    this.getHomeGoodsData("sell");
    this.getHomeGoodsData("new");
    this.getHomeGoodsData("pop");
  },
  mounted() {},
  computed: {
    itemList() {
      return this.goodsListData[this.navType].itemdata;
    },
  },
  methods: {
    /**
     *  监听事件相关函数
     */
    navClick(index) {
      switch (index) {
        case 0:
          this.navType = "pop";
          break;
        case 1:
          this.navType = "new";
          break;
        case 2:
          this.navType = "sell";
          break;
      }
      this.$refs.navControl1.currentIndex = index
      this.$refs.navControl2.currentIndex = index
    },
    backTop() {
      this.$refs.scroll.scrollTo(0, 0, 1000);
    },
    scrollPosition(position) {
      this.showBackTop = -position.y > 1000;
      (-position.y>=this.navoffsetTop)?this.isFixed = true:this.isFixed = false
    },
    loadMore() {
      this.getHomeGoodsData(this.navType);
    },
    swiperImgLoad() {
      this.navoffsetTop = this.$refs.navControl2.$el.offsetTop
    },
    /**
     *  网络请求相关函数
     */
    //请求轮播图数据
    getHomeNavData() {
      getHomeNavData().then(
        (res) => {
          this.swiperData = res.data.data.banner.list;
          this.recommendData = res.data.data.recommend.list;
        },
        (err) => {
          console.log(err);
        }
      );
    },
    getHomeGoodsData(type) {
      getHomeGoodsData(type, ++this.goodsListData[type].page).then(
        (res) => {
          let result = "";
          result = res.data.data.list;
          this.goodsListData[type].itemdata.push(...result);
          this.$refs.scroll.finishPullUp();
        },
        (err) => {
          console.log(err);
        }
      );
    },
  },
};
</script>
<style scoped>
#home {
  /* padding-top: 40px; */
  position: relative;
  height: 100vh;
}
/* .NavControl {
  position: sticky;
  top: 39px;
} */
.content {
  position: absolute;
  left: 0;
  right: 0;
  top: 40px;
  bottom: 49px;
}
</style>